<template>
	<view class="container">
		<view class="banner">
			<image :src="'https://elderlycomm.oss-cn-chengdu.aliyuncs.com/static/banner.jpg'"></image>
		</view>
		<!-- 日常生活 -->
		<view class="days col" :style="{ borderBottom: '2px solid #76b852' }">
			<view class="img">
				<image src="https://elderlycomm.oss-cn-chengdu.aliyuncs.com/static/4.jpg" mode="aspectFill"></image>
			</view>
			<view class="content">
				<view class="title">
					日常生活
				</view>
				<view class="info">
					三餐, 用药, 吸烟, 睡眠, 饮酒
				</view>
			</view>

			<view class="btn green">
				填写
			</view>
		</view>

		<!-- 身体不适 -->
		<view class="days col" @click="Go('./Body/Body')" :style="{ borderBottom: '2px solid #fdbd10' }">
			<view class="img">
				<image src="https://elderlycomm.oss-cn-chengdu.aliyuncs.com/static/1.jpg" mode="aspectFill"></image>
			</view>
			<view class="content">
				<view class="title">
					身体不适
				</view>
				<view class="info">
					及时记录身体不适, 以便于我们更好的追踪回访
				</view>
			</view>

			<view class="btn yellow">
				填写
			</view>
		</view>

		<!-- 体重血压 -->
		<view class="days col" :style="{ borderBottom: '2px solid #ee4f4f' }" @click="Go('./infoCharts/infoCharts')">
			<view class="img">
				<image src="https://elderlycomm.oss-cn-chengdu.aliyuncs.com/static/2.jpg" mode="aspectFill"></image>
			</view>
			<view class="content">
				<view class="title">
					身体自测数据
				</view>
				<view class="info">
					按时统计血糖和血压, 养成良好的生活习惯
				</view>
			</view>

			<view class="btn red">
				填写
			</view>
		</view>

		<!-- 医院检查结果 -->
		<view class="days col" :style="{ borderBottom: '2px solid #553a99' }" @click="Go('./inspect/inspect')">
			<view class="img">
				<image src="https://elderlycomm.oss-cn-chengdu.aliyuncs.com/static/3.jpg" mode="aspectFill"></image>
			</view>
			<view class="content">
				<view class="title">
					医院检查结果
				</view>
				<view class="info">
					上传药品, 病例, 化验单, 体检单等资料
				</view>
			</view>

			<view class="btn c">
				填写
			</view>
		</view>

	</view>
</template>

<script>
export default {
	name: "health",
	data() {
		return {}
	},
	methods: {
		Go(url) {
			uni.navigateTo({
				url
			})
		}
	}
}
</script>

<style lang="less" scoped>
.container {
	padding: 0 15rpx;
}



.col {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 40rpx 35rpx;

	.img {
		image {
			width: 100rpx;
			height: 100rpx;
		}
	}

	.content {
		width: 350rpx;
		text-align: center;

		.title {
			font-size: 40rpx;
			margin-bottom: 20rpx;
		}

		.info {
			font-size: 30rpx;
			color: #8d8c8c;
		}
	}

	.btn {
		width: 120rpx;
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
		font-size: 40rpx;
		border-radius: 50%;
		font-weight: 600;
	}

	.green {
		border: 5px solid #76b852;
		color: #76b852;
	}

	.red {
		border: 5px solid #ee4f4f;
		color: #ee4f4f;
	}

	.yellow {
		border: 5px solid #fdbd10;
		color: #fdbd10;
	}

	.c {
		border: 5px solid #553a99;
		color: #553a99;
	}

}
</style>
